<template>
    <div class="item-container">
        <div class="item-title">{{ title }}</div>
        <div class="item-content">
            <div class="check-li top">
                <div class="check-li-item">
                    <div class="check-li-item-name">
                        <span class="circle"></span>
                        {{ data.title.leftTitle.name }}
                    </div>
                    <div class="check-li-item-num">
                        <CountTo :value="data.title.leftTitle.num" :duration="2000" />
                    </div>
                </div>
                <div class="check-li-item">
                    <div class="check-li-item-name">
                        <span class="circle"></span>
                        {{ data.title.rightTitle.name }}
                    </div>
                    <div class="check-li-item-num">
                        <CountTo :value="data.title.rightTitle.num" :duration="2000" />%
                    </div>
                </div>
                <div class="check-li-item top-last">
                    <usageDirect />
                </div>
            </div>
            <div class="check-li bottom">
                <div class="check-li-item">
                    <div class="check-li-item-name">
                        {{ data.content.leftContent.name }}
                        <span class="circle right"></span>
                    </div>
                    <div class="check-li-item-num green">
                        <CountTo :value="data.content.leftContent.num" :duration="2000" />
                    </div>
                </div>
                <div class="check-li-item">
                    <div class="check-li-item-name">
                        {{ data.content.rightContent.name }}
                        <span class="circle yellow"></span>
                    </div>
                    <div class="check-li-item-num yellow">
                        <CountTo :value="data.content.rightContent.num" :duration="2000" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import usageDirect from "@/view/assetStatusDetail/Appendcharts/usageDirect/index.vue";
import CountTo from '@/components/CountTo/index.vue';

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
});
</script>

<style scoped>
.item-container {
    width: 90%;
    margin-left: 1.3vw;
    margin-top: 1vw;
    height: 90%;
    display: flex;
    flex-direction: column;
}

.item-title {
    width: 10.416667vw;
    height: 1.666667vw;
    line-height: 1.25vw;
    padding-left: 0.520833vw;
    font-size: 1.25vw;
    font-family: homeTime;
    color: #fff;
    text-align: left;
    text-shadow: 0 0 0.364583vw rgba(58, 178, 231, 0.67);
    letter-spacing: 0.104167vw;
    background: url("@/assets/home/titlebase.png");
    background-position: left bottom;
    background-size: 100%;
    background-repeat: no-repeat;
}

.item-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.check-li.top {
    padding: 1vw 0;
    display: flex;
    justify-content: space-around;
}

.check-li.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.check-li.bottom .check-li-item {
    flex-basis: 49%;
    border: 1px solid rgba(84, 229, 252, 0.24);
    width: 100%;
    height: 100%;
    padding: 1vw;
    box-sizing: border-box;
}

.check-li-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.check-li-item.top-last {
    width: 10vw;
    height: 8vw;
}

.check-li-item-name {
    line-height: 1.041667vw;
    font-size: 0.729167vw;
    color: #fff;
    margin-bottom: 0.520833vw;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.check-li-item-name .circle {
    display: inline-block;
    width: 0.260417vw;
    height: 0.260417vw;
    border: 1px solid #54e5fc;
    border-radius: 50%;
    margin-right: 0.208333vw;
}

.check-li-item-name .circle.right {
    border: 1px solid #00e6b6;
    background-color: #00e6b6;
}

.check-li-item-name .circle.yellow {
    border: 1px solid #e6e600;
    background: #e6e600;
}

.check-li-item-num {
    font-size: 1.25vw;
    font-family: homeTime;
    letter-spacing: 0.104167vw;
    text-shadow: 0 0 0.364583vw rgba(58, 178, 231, 0.67);
    color: #3ab2e7;
    margin-top: 0.625vw;
    display: flex;
;
}

.check-li-item-num.yellow {
    color: #e6e600;
}

.check-li-item-num.green {
    color: #00e6b6;
}
</style>